<template>
  <div class="g-item" ref="pieChart"></div>
</template>

<script>
import echarts from 'echarts'; // 导入 ECharts 库
import request from "@/util/request.js";

export default {
  mounted() {
    this.renderPieChart(); // 在组件挂载后渲染饼图
    this.getAwardData(); // 初始获取一次数据
  },
  data() {
    return {
      awardData: [],
    };
  },
  methods: {
    getAwardData() {
      request.get("/info_award/count").then(res => {
        this.awardData = []; // 清空数组
        this.awardData.push(...res.data.data); // 添加新数据
        this.updateData(); // 更新图表数据
      });
    },

    updateData() {
      const chartContainer = this.$refs.pieChart; // 获取饼图容器
      const chart = echarts.getInstanceByDom(chartContainer); // 获取 ECharts 实例
      // 更新饼图的数据
      chart.setOption({
        series: [{
          data: this.awardData
        }]
      });
    },
    renderPieChart() {
      const chartContainer = this.$refs.pieChart; // 获取饼图容器
      const chart = echarts.init(chartContainer); // 初始化 ECharts 实例

      // 饼图的数据和配置
      const option = {
        title: {
          text: '获奖统计', // 设置顶部标题
          top: '10px', // 设置顶部标题的位置
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [{
          type: 'pie',
          radius: '70%',
          center: ['50%', '50%'], // 设置图表居中显示
          data: this.awardData
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      chart.setOption(option);
    }
  }
};
</script>

<style scoped>

</style>
